@()(implicit request: play.api.mvc.RequestHeader)
	@main("Geographical Predict") {

		<script src="@routes.Assets.at("javascripts/main.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("Highmaps-6.1.0/highmaps.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("Highmaps-6.1.0/exporting.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("Highmaps-6.1.0/data.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("Highmaps-6.1.0/world.js")" type="text/javascript"></script>

		<style>

				.radio, .checkbox {
					position: relative;
					display: block;
					margin-top: 5px;
					margin-bottom: 10px;
				}

				table img {
					vertical-align: middle;
				}

				table .myImgTd {
					text-align: center;
				}

				.fa-rotate-135 {
					-webkit-transform: rotate(135deg);
					-moz-transform: rotate(135deg);
					-ms-transform: rotate(135deg);
					-o-transform: rotate(135deg);
					transform: rotate(135deg);
				}

				.fa-rotate-45 {
					-webkit-transform: rotate(45deg);
					-moz-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
					-o-transform: rotate(45deg);
					transform: rotate(45deg);
				}

				.myGroup {
					margin-top: 15px;
					margin-left: 15px;
				}


		</style>

		<div class="row">
			<div class="form-group col-sm-12">
				<h2 class="page-heading"
				style="text-align: left;
					border-bottom: 5px solid #e9f3f4">Geographical Predict</h2>
			</div>
		</div>

		<div id="content" style="display: block" >

			<form class="registration-form form-horizontal" id="form"
			accept-charset="UTF-8" method="post">

				<div class="form-group">
					<label class="control-label col-sm-2">Query genome（*.fa,*.fna）:</label>
					<div class="col-sm-8">
						<input id="input-1" type="file" class="file" name="file" data-show-preview="false"
						data-show-upload="false" accept=".fa,.fna">
						<span class="help-block"><a href="@routes.ToolController.downloadExampleFile?fileName=query.fa"><em>
							Example file</em></a></span>
					</div>
				</div>

				<div class="form-group">
					<div class="actions col-sm-offset-2 col-sm-2">
						<button type="button" class="btn btn-primary myRun" style="width: 90%;" id="search" >
							Run</button>
					</div>

				</div>


			</form>


		</div>

		<div id="result" style="display: none">

			<h4>Predict result</h4>
			<div>
				The query genome most likely from  <b id="country">China</b>!
			</div>

		</div>


		<script>

				Tool.fileInput

				$(function () {

					GeoPredict.init

				})
		</script>


	}
